<template>
  <div class="bullet-type-selector-horizontal">
    <n-card :bordered="false" class="selector-card" size="small">
      <div class="selector-content">
        <!-- 标题 -->
        <div class="selector-header">
          <n-space align="center" :size="8">
            <n-icon :size="18" color="#f56c6c">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
              </svg>
            </n-icon>
            <n-text strong>选择子弹类型</n-text>
          </n-space>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <n-spin size="small" />
          <n-text :depth="3">加载中...</n-text>
        </div>

        <!-- 类型选择器 - 横向布局 -->
        <div v-else class="type-selector-horizontal">
          <!-- 全部类型选项 -->
          <div
            class="type-tag"
            :class="{ active: selectedTypeId === 0 }"
            @click="selectType(0, '全部类型')"
          >
            <div class="tag-icon">
              <n-icon :size="14">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                </svg>
              </n-icon>
            </div>
            <span class="tag-text">全部类型</span>
            <span class="tag-count">({{ totalCount }})</span>
          </div>

          <!-- 具体类型选项 -->
          <div
            v-for="type in bulletTypes"
            :key="type.id"
            class="type-tag"
            :class="{ active: selectedTypeId === type.id }"
            @click="selectType(type.id, type.name)"
          >
            <div class="tag-icon">
              <img
                :src="type.image_url"
                :alt="type.name"
                class="tag-image"
              />
            </div>
            <span class="tag-text">{{ type.name }}</span>
            <span class="tag-count">({{ type.item_count }})</span>
          </div>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getBulletTypes } from '@/api/bulletPrice'
import type { BulletType } from '@/types/bulletPrice'

// Props
interface Props {
  selectedTypeId?: number
}

const props = withDefaults(defineProps<Props>(), {
  selectedTypeId: 0
})

// Emits
const emit = defineEmits<{
  'type-change': [typeId: number, typeName: string]
}>()

// 响应式数据
const bulletTypes = ref<BulletType[]>([])
const loading = ref(false)
const selectedTypeId = ref(props.selectedTypeId)

// 计算总数量
const totalCount = computed(() => {
  return bulletTypes.value.reduce((sum, type) => sum + type.item_count, 0)
})

// 选择类型
const selectType = (typeId: number, typeName: string) => {
  selectedTypeId.value = typeId
  emit('type-change', typeId, typeName)
}


// 获取子弹类型数据
const fetchBulletTypes = async () => {
  try {
    loading.value = true
    const response = await getBulletTypes()
    if (response.code === 1) {
      bulletTypes.value = response.data || []
    } else {
      console.error('获取子弹类型失败:', response.message)
    }
  } catch (error) {
    console.error('获取子弹类型失败:', error)
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchBulletTypes()
})
</script>

<style scoped>
.bullet-type-selector-horizontal {
  width: 100%;
}

.selector-card {
  background: var(--n-card-color);
  border-radius: 8px;
}

.selector-content {
  padding: 16px 20px;
}

.selector-header {
  margin-bottom: 16px;
}

.type-selector-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.type-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--n-border-color);
  background-color: var(--n-card-color);
  white-space: nowrap;
}

.type-tag:hover {
  background-color: var(--n-color-hover);
  border-color: var(--n-color-primary-hover);
  transform: translateY(-1px);
}

.type-tag.active {
  background-color: var(--n-color-primary);
  border-color: var(--n-color-primary);
  color: white;
}

.type-tag.active .tag-text,
.type-tag.active .tag-count {
  color: white;
}

.tag-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

.type-tag.active .tag-icon {
  background-color: rgba(255, 255, 255, 0.3);
}

.tag-image {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}

.tag-text {
  font-weight: 500;
}

.tag-count {
  opacity: 0.8;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .selector-content {
    padding: 12px 16px;
  }

  .type-selector-horizontal {
    gap: 6px;
  }

  .type-tag {
    padding: 6px 10px;
  }

  .tag-icon {
    width: 18px;
    height: 18px;
  }

  .tag-image {
    width: 14px;
    height: 14px;
  }


}
</style>
